<template>
  <div>
    <n-alert title="子组件2-监听" type="info">
      <template #icon>
        <icons name="i-info" />
      </template>
      <div>
        <n-switch v-model:value="active">
          <template #checked> 监听开 </template>
          <template #unchecked> 监听关 </template>
        </n-switch>
      </div>
      <div>接收的值:{{ listenerValue }}</div>
    </n-alert>
  </div>
</template>

<script lang="ts" setup>
import { bus } from '@/utils/bus'
const listenerValue = ref('')
const active = ref<boolean>(true)

watchEffect(() => {
  if (!active.value) {
    bus.$off('test')
  } else {
    bus.$on('test', (value) => {
      listenerValue.value = value
    })
  }
})
</script>

<style scoped></style>
